<template>
  <!-- U本位合约历史 -->
  <div class="perpetualHistory">
    <assets-head :title="$t('U本位合约历史')" :backFunc="() => {
      if ($route.query.goback) {
        $router.push({
          path: '/funds',
          query: {
            tab: 2,
            index: 0 // 0: 查看理财订单 1: 矿机
          }
        })
      } else {
        //$router.push(`/perpetualContract/${symbol}?selectIndex=1`)
        $router.go(-1)
      }
    }" />
    <div>
      <van-tabs ref="tabs" v-model="type" @change="onChange" sticky>
        <van-tab :title="item.title" v-for="item in selectData" :key="item.title" :name="item.type">
          <select-coin-box :symbol="symbol" @updateCoin="selectItem" />
          <template v-if="type === 'orders'">
            <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
              :finished-text="dataList.orders.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130">
              <PerpetualEntrustList v-if="type === 'orders'" :list-data="dataList.orders" @recall="recall">
              </PerpetualEntrustList>
              <div class="flex flex-col justify-center pt-50 pb-20 items-center"
                v-if="!dataList.orders.length && !loading">
                <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
                <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
              </div>
            </van-list>
          </template>

          <template v-if="type === 'hisorders'">

            <van-list v-model="loading" :loading-text="$t('加载中...')" :finished="finished"
              :finished-text="dataList.hisorders.length ? $t('已经全部加载完毕') : ''" @load="onLoad" :offset="130">

              <PerpetualHistoryPosition :list-data="dataList.hisorders"></PerpetualHistoryPosition>
              <div class="flex flex-col justify-center pt-50 pb-20 items-center"
                v-if="!dataList.hisorders.length && !loading">
                <img src="@/assets/image/assets-center/no-data.png" alt="" class="w-180 h-180" />
                <p class="text-grey mt-10">{{ $t('暂无记录') }}</p>
              </div>
            </van-list>
          </template>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import PerpetualEntrustList from '@/components/perpetual-entrust-list/index.vue';
import PerpetualHistoryPosition from '@/components/perpetual-history-position/index.vue';
import { _orderListCur, _orderListHold } from '@/API/trade.api'
import { _getCoins } from '@/API/home.api'
import { List, Tab, Tabs, DropdownMenu, DropdownItem } from 'vant';
import selectCoinBox from "@/components/selectCoinBox/index.vue";
import {mapGetters} from "vuex";
export default {
  data() {
    return {
      type: "orders",
      dataList: {
        orders: [],
        hisorders: []
      },
      symbol: '',
      selectData: [
        { title: this.$t('当前委托'), type: 'orders' },
        { title: this.$t('历史仓位'), type: 'hisorders' },
      ],
      loading: false,
      finished: false,
      page: 1,
    };
  },
  mounted() {
    this.symbol = this.$route.query.symbol === undefined ? '' : this.$route.query.symbol
  },
  methods: {
    onChange(e) {
      this.dataList[e] = []
      this.finished = false
      this.page = 1
      this.type = e
      this.loading = true;
      if (this.loading) {
        this.fetchList(this.symbol)
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    async fetchList(symbol) {
      if(this.userInfo.token) {
        const _api = this.type === 'orders' ? _orderListCur : _orderListHold
        const type = this.type
        _api(symbol, type, this.page).then(data => {
          this.dataList[type] = this.dataList[type].concat(data)
          this.loading = false
          if (data.length < 10) {
            this.finished = true
          }
          this.page++
        })
      }else{
        this.loading = false
      }
    },
    recall() {
      this.page = 1;
      this.dataList.orders = []
      this.fetchList(this.symbol)
    },
    onLoad() {
      this.fetchList(this.symbol)
    },
    //选择币种
    selectItem(symbol) {
      this.dataList[this.type] = []
      this.page = 1
      this.symbol = symbol
      this.fetchList(this.symbol)
    }
  },
  components: {
    PerpetualEntrustList,
    PerpetualHistoryPosition,
    assetsHead,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [List.name]: List,
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    selectCoinBox,
  },
  computed:{
    ...mapGetters('user', ['userInfo']),
  },
  beforeRouteEnter(to, from, next) {
    const { query: { symbol } } = to
    next(vm => {
      vm.symbol = symbol

    })
  }
}

</script>
<style lang="scss" scoped>
.perpetualHistory {
  width: 100%;
  box-sizing: border-box;
  min-height: 100vh;

  @include themify() {
    background: themed("main_background");
  }

  ::v-deep .van-tab {
    @include themify() {
      color: themed("text_color");
    }
  }

  ::v-deep .van-tabs__nav {
    @include themify() {
      background: themed("tab_background");
    }
  }

  ::v-deep .van-tab--active {
    background: #1194F7;
    border-radius: 5px;
    color: #fff !important;
  }

  ::v-deep .van-nav-bar {
    @include themify() {
      background: themed("main_background");
    }
  }

  ::v-deep .van-nav-bar__title {
    @include themify() {
      color: themed("text_color");
    }
  }

  ::v-deep .van-tabs__nav {
    @include themify() {
      background: themed("tab_background");
    }
  }

  ::v-deep .van-tabs__line {
    background-color: transparent !important;

  }

}

.active-line {
  position: relative;
  padding-bottom: 30px;
  color: #1194F7;
}

.active-line::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  right: 0;
  width: 280px;
  height: 8px;

  @include themify() {
    background-color: themed("color_main");
  }
}

::v-deep .van-tabs {
  padding: 0 40px !important;
}

::v-deep .van-nav-bar {
  @include themify() {
    background: themed("main_background");
  }
}

::v-deep .van-nav-bar__title {
  @include themify() {
    color: themed("text_color");
  }
}

::v-deep .van-tabs__nav {
  @include themify() {
    background: themed("main_background");
  }
}

::v-deep .van-tab--active {
  color: #fff;
}

</style>
